<!-- #layout name=blank -->
<div id="app">
  <div class="page-header">
    <h1 class="title">Site user</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a class="btn green navbar-btn" @click="onAddUser">Add user</a>
      <a v-if="selected.length > 0" @click="onDelete" class="btn red navbar-btn"
        >Delete</a
      >
    </div>
  </div>
  <kb-table :data="tableData" :show-select="true" :selected.sync="selected">
    <kb-table-column
      :label="Kooboo.text.common.username"
      prop="username"
    ></kb-table-column>
    <kb-table-column :label="Kooboo.text.site.siteUser.role">
      <template v-slot="row">
        <span :class="['label', row.role.class]">{{ row.role.text }}</span>
      </template>
    </kb-table-column>
  </kb-table>

  <div
    v-kb-modal="showAddUserModal"
    class="modal fade"
    data-backdrop="static"
    data-keyboard="false"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" @click="onCancel"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">Add User</h4>
        </div>
        <div class="modal-body">
          <div class="form-horizontal">
            <div class="form-group">
              <label class="control-label col-md-3">Available user</label>
              <div class="col-md-9">
                <select v-model="newUser" class="form-control">
                  <option v-for="item in availableUsers" :value="item.userId">
                    {{ item.userName }}
                  </option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-md-3">Role</label>
              <div class="col-md-9">
                <select class="form-control" v-model="newRole">
                  <option v-for="item in availableRoles" :value="item.value">
                    {{ item.name }}
                  </option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn green" @click="onSaveNewUser">Save</button>
          <button class="btn gray" @click="onCancel">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/components/kbTable.js",
      "/_Admin/Scripts/components/kbBreadcrumb.js"
    ]);
  })();
</script>
<script src="/_Admin/View/System/SiteUser.js"></script>
